
<template>
  <div class="linkage flex flex-col"> 
    <div class="category-wrap flex flex-1 overflow-hidden">
      <!-- 左侧菜单 -->
      <scroll-view scroll-y scroll-with-animation class="category-bar" :style="{ width: `${menuWidth}`, background: menuBg }">
        <div
          v-for="(item, index) in cateData"
          :key="index"
          class="category-item"
          @click="switchCate(index)"
        >
          <slot name="menuTitle" :row="item" :index="index" />
        </div>
      </scroll-view>
      <!-- 右侧内容 -->
      <scroll-view
        scroll-y
        scroll-with-animation
        class="category-content"
        :scroll-top="scrollRightTop"
        @scroll="rightScroll"
      >
        <div
          v-for="(item, index) in cateData"
          :key="index"
          class="category-right-item mb-30rpx p-30rpx"
          :class="{ 'category-right-item-last': cateData.length === index + 1 }"
        >
          <slot name="main" :row="item" :index="index" />
        </div>
      </scroll-view>
    </div>
  </div>
</template>

<script lang='ts' setup>
interface Props {
  menuWidth?: string
  menuBg: string
  cateData: any[]
  onItemClick?: (item: any) => void
  onsSroll?: (e: any) => void
  onChangIndex?: (i: number) => void
}
const { menuWidth = '325rpx', onChangIndex } = defineProps<Props>()
let current = $ref(0)
watch(() => current, () => {
  onChangIndex && onChangIndex(current)
}, { immediate: true })
let cateItemHeight = $ref(0)
let cateBarHeight = $ref(0)
let rightScrollArr: any = $ref([])
let scrollRightTop = $ref(0)
const getCateItemTop = () => {
  let query = uni.createSelectorQuery()
  query
    .selectAll('.category-right-item')
    .boundingClientRect((rects: any) => {
      rects.forEach((rect) => {
        rightScrollArr.push(rect.top)
      })
    })
    .exec(() => {})
}
const switchCate = async (index) => {
  if (rightScrollArr.length === 0) {
    await getCateItemTop()
  }
  if (index === current) return
  scrollRightTop = rightScrollArr[index]
  cateDataStatus(index)
}
const cateDataStatus = (index) => {
  current = index
  if (cateBarHeight === 0 || cateItemHeight === 0) {
    getElRect('.category-bar', 'cateBarHeight')
    getElRect('.category-item', 'cateItemHeight')
  }
}
const getElRect = (elClass, dataVal) => {
  const query = uni.createSelectorQuery()
  query
    .select(elClass)
    .fields(
      {
        size: true,
      }, () => {},
    )
    .exec(() => {})
}
const rightScroll = async (e: any) => {
  if (rightScrollArr.length === 0) {
    await getCateItemTop()
  }
  if (!cateBarHeight) {
    await getElRect('.category-bar', 'cateBarHeight')
  }
  let scrollHeight = e.detail.scrollTop

  for (let i = 0; i < rightScrollArr.length; i++) {
    let height1 = rightScrollArr[i]
    let height2 = rightScrollArr[i + 1]
    if (!height2 || scrollHeight <= height1) {
      cateDataStatus(i)
      return
    }
  }
}
onReady(() => {
  getCateItemTop()
})
</script>

<style lang='scss'>
.linkage {
  height: 80vh
}
  .category-right-item-last {
    height: calc(80vh - 60rpx - var(--window-top));
  }
</style>
